import React from "react";
import LearnLife3 from "./learn-life3";

export default class LearnLife2 extends React.Component {
  state = {
    num: 1,
    isError: false,
  };

  /**
   *
   * @param {*} nextProps
   * 当前的props
   * @param {*} preState
   * dom更新前，的state
   * 但是这个state是我么你修改后的值
   * 必须有返回值
   *
   */
  static getDerivedStateFromProps(nextProps, preState) {
    console.log(nextProps, preState, "getDerivedStateFromProps");
    // return {
    //   /**
    //    * 额外在加+1
    //    */
    //   num: preState.num + 1
    // };
    return null;
  }

  componentDidMount() {
    console.log("componentDidMount");
  }

  /**
   *
   * @param {*} nextProps 当前的props
   * @param {*} nextState 更新的state
   */
  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState, "shouldComponentUpdate");

    /**
     * 偶数的时候渲染
     * 奇数的时候不渲染
     */
    return nextState.num % 2 === 0;
  }

  /**
   *
   * @param {*} preProps
   * 上一次的props
   * @param {*} preState
   * 上次的state
   * @returns
   */
  getSnapshotBeforeUpdate(preProps, preState) {
    console.log(preProps, preState, "getSnapshotBeforeUpdate");
    return "给componentDidUpdate传值";
  }

  componentDidUpdate(nextProps, nextState, snapshot) {
    console.log(nextProps, nextState, snapshot, "componentDidUpdate");
  }

  componentWillUnmount() {
    console.log("组件卸载", "componentWillUnmount");
  }

  /**
   * 当我们的子孙组件发生错误的时候触发
   * 当前组件发生错误不会触发
   * 并且发生错误后还是会render以下当前组件
   * 那么我们可以使用这个组件的返回值修改state
   * @param {*} error
   */
  // static getDerivedStateFromError(error) {
  //   console.log(error, "我是错误");

  //   return {
  //     isError: true,
  //   };
  // }

  render() {
    console.log("渲染啦");
    return (
      <div>
        <div>你好我是。getDerivedStateFromProps -- {this.state.num}</div>
        <button
          onClick={() =>
            this.setState({
              num: this.state.num + 1,
            })
          }
        >
          +1
        </button>
        {this.state.isError ? "发生了报错" : <LearnLife3></LearnLife3>}
      </div>
    );
  }
}
